<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式绑定小练习</title>
    <style>
        .hot{
            background-color: #bfa;
        }
        .cool{
           background-color: skyblue;
        }
    </style>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="root">
<h2 :class="cname">今天天气很{{weatherText}}</h2>
    <button @click="change">切换天气</button>
    <hr>
    <h2>当前求和为:{{sum}}</h2>
    <!--方法只有一行代码时 可以在模板里直接填写sum+=1-->
    <button @click="sum+=1">点击加1</button>
</div>
<script type="text/javascript">
    Vue.config.productionTip=false//禁止提示生产提示
    new Vue({
        el:"#root",
        data(){
            return {
            isHot:true,
                cname:"hot",
             sum:0
            }
        },
        computed:{
            weatherText(){
                return this.isHot?"炎热":"凉爽"
            }
        },
        methods:{
            change(){
               this.isHot=!this.isHot
               if (this.isHot){
                   return this.cname="hot"
               } else {
                   return this.cname="cool"
               }
            }
        }
    })
</script>
</body>
</html>